<template>
    <div class = "about-box">
        <div class = "header-box">
            <h1>{{about.time}}</h1>
        </div>
        <div class = "center-box">
            <div class = "weather-box">
                <p>{{about.weather.city}}</p>
                <div class = "row-box" v-for = "item in about.weather.forecast">
                    <span>{{item.date}}</span>
                    <span>{{item.type}}</span>
                    <span>{{item.high}}</span>
                    <span>{{item.low}}</span>
                    <span>{{item.fengli.replace("<![CDATA[","").replace("]]>","")}}</span>
                    <span>{{item.fengxiang}}</span>
                </div>
            </div>
            <p>
                {{about.msg}}
            </p>
        </div>
        <div class = "footer-box">
        </div>
    </div>
</template>

<script setup>
import {computed, onBeforeUnmount, reactive, toRaw} from "vue";
import store from "../store";

import axios from "axios";
import dayjs from "dayjs";
let about = reactive({
    msg:`
        注:所有月都按照30天来计算,所有年都按照365天来计算,到期日期难免会有提前.
    `,
    weather:{},
    time:""
})


function getWeather(){
    let weather = JSON.parse(localStorage.getItem("weather"));
    if(weather=== null || weather.date !== dayjs().format("YYYY-MM-DD")){
        let city = '杭州';
        axios({
            url: `http://wthrcdn.etouch.cn/weather_mini`,
            method: 'get',
            params: { city:city },
        }).then((res) => {
            if(res.data.status === 1000){
                about.weather = res.data.data;

                let wj = {
                    date:dayjs().format("YYYY-MM-DD"),
                    content:about.weather
                }
                localStorage.setItem("weather",JSON.stringify(wj));
                // ipc.send('showMsgWindow', toRaw(msgWinObj));
            }else{
                console.log(res.data);
            }
        },(error)=>{
            console.log(error);
        });
    }
    else{
        about.weather = JSON.parse(localStorage.getItem("weather")).content;
    }
}

function getWeekOnYears() {
    const year = dayjs().year();
    const month = dayjs().month() + 1;
    const day = dayjs().date();
    const isLeapYear = (year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0);
    const second = isLeapYear ? 29 : 28;
    const monthList = [31, second, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31].splice(0, month - 1);
    let currentDays;
    let currentWeek;
    currentDays = month === 1 ? day : (monthList.reduce((t, v) => {
        return t + v
    }, 0)) + day
    currentWeek = currentDays % 7 === 0 ? currentDays / 7 : Math.ceil(currentDays / 7)
    return currentWeek
}
let weekMap = [
    "日",
    "一",
    "二",
    "三",
    "四",
    "五",
    "六",
]

let timer = null;
about.time = dayjs().format("YYYY年M月D日  HH:mm:ss") + "  星期"+weekMap[dayjs().day()]+ "   第"+getWeekOnYears()+"周";

timer = setInterval(()=>{
    about.time = dayjs().format("YYYY年M月D日  HH:mm:ss") + "  星期"+weekMap[dayjs().day()]+ "   第"+getWeekOnYears()+"周";
},1000);
onBeforeUnmount(()=>{
    if(timer!==null)
        clearInterval(timer);
})
</script>

<style scoped lang="scss">
.about-box{
    background: #fff;
    padding: 10px;

    .header-box{
        padding-bottom: 10px;
        display: flex;
        h1{
            font-weight: bold;
        }
    }
    .center-box{
        width: 100%;
        height: calc(100vh - 120px);
        overflow: auto;
        h1{
            font-weight: bold;
            color: black;
        }
        .weather-box{
            .row-box{
                &>*{
                    display:inline-block;
                    min-width:77px;
                }
            }
        }
    }
}
</style>
